<template>
  <div class="text-center mt-8" disable>
    <div class="pa-4">
      <v-chip-group
        active-class="primary--text"
        column
        v-model="$store.state.tagid"
        @change="change"
      >
        <v-chip
          v-for="(tag, index) in tags"
          :key="index"
          filter
          label
          :value="tag.id"
        >
          {{ tag.tagName }}
        </v-chip>
      </v-chip-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: [],
    };
  },
  methods: {
    // 这个方法用来检测tag栏选中变化
    change(id) {
      if (id) {
        this.toPage(id);
      } else {
        this.toMain();
      }
    },
    toPage(id) {
      this.$store.commit("CHANGETAGID", id);

      this.$axios.get("/tag/gettagpagedata/" + id).then((resp) => {
        this.$store.commit("TAGTOMAIN", resp.data.allPages);
        this.$store.commit("CHANGGELIST", {
          url: "/tag/getArcticlePage/" + id,
          router: "ArticleListforTagPage",
        });

        this.$router.push({
          name: "ArticleListforTagPage",
          query: {
            current: "1",
            tagid: id,
          },
        });
      });
    },
    toMain() {
      this.$store.commit("CHANGGELIST", {
        url: "/arcticle/getArcticlePage",
        router: "ArticleList",
      });
      this.$store.commit("CHANGETAGID", 0);
      this.$axios
        .get("/arcticle/getpagedata", {
          params: {
            current: "1",
          },
        })
        .then((resp) => {
          this.$store.commit("TAGTOMAIN", resp.data.data.allPages);

          this.$store.commit("TOMAIN", false);
        });

      this.$router.push({
        name: "ArticleList",
        query: {
          current: 1,
        },
      });
    },
  },
  mounted() {
    this.$axios.get("/tag/alltag").then(
      (response) => {
        this.tags = response.data.data;
      },
      (error) => {
        console.log(error.message);
      }
    );
  },
};
</script>
